<template>
  <div class="my-order">
    <div class="mo-main">
      <div>
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >

          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="formInline.date"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="formInline.region"
              placeholder="选择订单状态"
            >
              <el-option
                v-for="item in optionsList"
                :key="item.sign"
                :label="item.txt"
                :value="item.txt"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="formInline.user"
              placeholder="请输入订单编号"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
            >搜索</el-button>
            <el-button
              type="primary"
              @click="$router.push('/new-repair')"
            >新建返修</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
        >
          <el-table-column
            prop="index"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            prop="num"
            label="订单编号"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="创建时间"
          >
          </el-table-column>
          <el-table-column
            prop="oldnum"
            label="原订单号"
          >
          </el-table-column>
          <el-table-column
            prop="mony"
            label="返修订单金额"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="订单状态"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template>
              <el-button
                @click="$router.push('/new-repair')"
                type="text"
                size="small"
                :style="{color: '#C29C0F'}"
              >查看</el-button>
              <el-button
                @click="$router.push('/new-repair')"
                type="text"
                size="small"
                :style="{color: '#C29C0F'}"
              >返修</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="mom-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      optionsList: [
        { sign: "options001", txt: "已提交" },
        { sign: "options003", txt: "已接单" },
        { sign: "options002", txt: "修剪中" },
        { sign: "options004", txt: "已拒绝" },
      ],
      ShouhouVisible: false,
      ruleForm: {
        type: "",
        why: "",
        num: "",
      },
      formInline: {
        user: "",
        region: "",
        date: "",
      },
      tableData: [
        {
          index: "1",
          num: "FX-341964AQ",
          time: "2016-05-04",
          oldnum: "23341964AQ",
          mony: "700",
          type: "已提交",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style lang="scss" scoped>
.my-order {
  box-sizing: border-box;
  padding: 30px 90px;
  .mo-main {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 40px 30px;
    .mom-pagination {
      text-align: center;
      margin: 35px 0 0;
    }
  }
}
</style>